<!--  -->
<template>
    <div class="hbh-container">
      <commonTitle :title="'近1年备累计消费月排名'" />
      <div class="contentBox">
        <dv-scroll-ranking-board
          :config="config"
          style="width:100%;height:300px"
        />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: "wdfive",
    components: {},
    data() {
      //这里存放数据
      return {
        config: {
          data: [
            {
              name: "2023-10",
              value: 16667,
            },
            {
              name: "2023-11",
              value: 16662,
            },
            {
              name: "2023-12",
              value: 12631,
            },
            {
              name: "2024-1",
              value: 20000,
            },
            {
              name: "2024-2",
              value: 1500,
            },
            {
              name: "2024-3",
              value: 1000,
            },
          ],
          unit: "/元",
          waitTime: 100000,
        },
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
  </script>
  <style lang="scss" scoped>
  //@import url(); 引入公共css类
  .hbh-container {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .contentBox {
      width: 80%;
      padding-right: 20px;
      box-sizing: border-box;
      ::v-deep .dv-scroll-ranking-board {
        .row-item {
          .ranking-info {
            .rank {
              color: #fff !important;
            }
            .info-name {
              color: #fff !important;
            }
            .ranking-value {
              color: #4493ee !important;
            }
          }
          .ranking-column {
            background: rgba(102, 187, 249, 0.3);
            padding: 0;
            margin: 0;
            border: none;
            .inside-column {
              background: linear-gradient(to right, #1e5f9c, #66bbf9);
              margin: 0;
              position: relative;
              overflow: visible;
            }
            .inside-column::after {
              content: "";
              width: 6px;
              height: 14px;
              background-color: #66bbf9;
              position: absolute;
              top: calc(50% - 7px);
              right: -6px;
            }
          }
        }
      }
    }
  }
  </style>
  